<?php
    $registry   = Zend_Registry::getInstance();
    $constants = $registry->constants;
    $this->headLink()->appendStylesheet($this->baseUrl().'/static/css/main.css');
    $this->headScript()->appendFile("/static/js/jquery.js");
    $this->headScript()->appendFile("/static/js/jquery-ui-1.10.3.custom.js");
    $this->headScript()->appendFile("/static/js/jquery-ui-1.10.3.custom.min.js");
    
?>
<html>
    <head>
        <?php 
            echo $this->headLink();
            echo $this->headScript();
            ?>
        <title><?php echo $this->title ?></title>
        <meta charset="utf-8">
        <link rel="shortcut icon" href="/static/images/favicon.png">
    </head>
    <body>
        <div class="wrapper">
            <div class="header">
                <div class="topbar-center">
                    <span style="color:#DF5A49;font-weight: bold">SEARCH PLACE TO ADD COMMENT</span>
                </div>
                <div class="menu-left">
                    <ul>
                    <?php foreach($this->userFeature as $key=>$value){?>
                        <li><a href="<?php echo $value->feature_url?>"><?php echo $value->feature_name;?></a></li>
                    <?php }?>
                    </ul>
                </div>
                <div class="login-logout">
                    <span><?php echo "Xin chào ".$this->userName?></span> | <span><a href="/place/index/logout">LogOut</a></span>
                </div>
            </div>
            <div class="content1" id="content1">
                <div class="alert-title" id="alert">
                </div>
                <form id="merchant-form">
                    <div class="content1-group-input-left">
                        <input type="hidden" id="merchant_id" name="merchant_id" value="" style="text-decoration: none" />
                        <div class="input-field-left">Tên</div><input maxlength="255" value="" type="text" class="input-field-right" id="merchant-name" name="merchant-name"  placeholder="Tên" />
                        <div class="input-field-left">Địa chỉ</div><input maxlength="1000" value="" type="text" id="merchant-address" name="merchant-address" placeholder="Địa chỉ" class="input-field-right" />
                    </div>
                    <div class="content1-group-input-right">
                        <div class="input-field-left">Website</div><input maxlength="1000" value="" type="text" id="merchant-website" name="merchant-website" placeholder="Website" class="input-field-right"/>
                        <div class="input-field-left">Điện thoại</div><input maxlength="45" value="" type="text" id="merchant-tel" name="merchant-tel" placeholder="Tel" class="input-field-right"/>
                        <input type="hidden" value="" id="place-id" name="place-id"  style="text-decoration: none" />
                    </div>
                </form>
                <div class="button-add">
                    <button class="button-test" id="searchButton" onclick="searchPlace('/place/merchant-place/search-place')">
                        Search
                    </button>
                    <button class="button-test" onclick="clearContent()">
                        Clear
                    </button>
                    <button class="button-test" onclick="addPlace()">
                        Add place
                    </button>
                </div>  
            </div>
            <div class="content2">
                <div class="table-place" id="table-place">
                </div>
            </div>
        </div>
    </body>
</html>

<script>
    
    $(document).ready(function(){
        $("#table-place").load('/place/merchant-place/load-place');
        $("#merchant-name").focus();
        $("#merchant-name").select();
        $("#merchant-form").keyup(function(event){
            if(event.keyCode == 13){
                $("#searchButton").click();
                $("#merchant-name").focus();
            }
        });
        
        if(<?php echo $this->merchantNumber;?> == 0){
            $("#pagging-seach").text("0");
            $("#pagging-seach").val("0");
        }
        
    });
    
    $("#searchButton").keyup(function(event){
        if(event.keyCode == 13){
            merchant_name = $.trim($("#merchant-name").val());
            merchant_address = $.trim($("#merchant-address").val());
            merchant_tel = $.trim($("#merchant-tel").val());
            merchant_fax = $.trim($("#merchant-fax").val());
            merchant_website = $.trim($("#merchant-website").val());
                
            url = url + "?merchant_name="+encodeURIComponent(merchant_name)+
                        "&address="+encodeURIComponent(merchant_address)+
                        "&tel="+encodeURIComponent(merchant_tel)+
                        "&website="+encodeURIComponent(merchant_website);
            
            $("#table-place").load(url);
            
            $("#alert").val("");
            $("#alert").text("");
            $("#merchant-name").focus();
            $("#merchant-name").select();
        }
    });
    
    function addPlace(){
        window.location.replace("/place/merchant-place/add-merchant-place");
    }
    
    function searchPlace(url){
        merchant_name = $.trim($("#merchant-name").val());
        merchant_address = $.trim($("#merchant-address").val());
        merchant_tel = $.trim($("#merchant-tel").val());
        merchant_fax = $.trim($("#merchant-fax").val());
        merchant_website = $.trim($("#merchant-website").val());
            
        url = url + "?merchant_name="+encodeURIComponent(merchant_name)+
                    "&address="+encodeURIComponent(merchant_address)+
                    "&tel="+encodeURIComponent(merchant_tel)+
                    "&website="+encodeURIComponent(merchant_website);
        
        $("#table-place").load(url);
        
        $("#alert").val("");
        $("#alert").text("");
        $("#merchant-name").focus();
        $("#merchant-name").select();
    }
    
    function clearContent() {
        $("#merchant-name").val("");
        $("#merchant-address").val("");
        $("#merchant-tel").val("");
        $("#merchant-website").val("");
        $("#alert").val("");
        $("#alert").text("");
        $("#merchant-name").focus();
        $("#place-id").val("");
        $("#place-id").text("");

    }
</script>